图片懒加载

当一个有很多图片的网站首屏加载时,用户的可视区域只能看到20%的图片,如果这时候就请求所有图片资源显然是不合理的,不仅影响页面的渲染速度,还浪费用户的带宽.
那么我们就根据用户的可视区域进行图片的懒加载. 同时使用函数防抖和函数节流提升用户体验!

预览效果
预览效果(瀑布流)

普通图片懒加载

1. 先将图片的src设置为loading.gif,真实路径放在temp-src这个attr上.
2. 当图片出现在浏览器的可视区域就将真实路径赋值给src.

window.onload = (() => {

  let number = 0  // 记录替换过图片的索引
  let imgList = Array.from(document.getElementsByTagName('img'))
  let imgListLength = Array.from(document.getElementsByTagName('img')).length
  let seeHeight = document.documentElement.clientHeight

  const lazyLoad = function () {
    for (let i = number; i < imgListLength; i++) {
      let singleImg = imgList[i]
      //当前图片的顶部到可视区域的值                            当前图片的底部不能超过可视区域
      if (singleImg.getBoundingClientRect().top < seeHeight && singleImg.getBoundingClientRect().bottom > 0) {
        setTimeout(() => {
          singleImg.src = singleImg.getAttribute('temp-src')
          singleImg.style.border = '1px solid orangeRed'
        }, 1000)
        number = number + 1
      }
    }
  }

  function init () {
    setTimeout(() => {
      lazyLoad()
    }, 1000)
  }
  
  init()
  
  window.addEventListener('scroll', lazyLoad, false)

})

    /**
    * 1. 懒加载的效果已经实现了
    * 2. 但是当页面滚动会频繁触发scroll,我们可以设置一个锁来控制触发频率.
    * 3. 下面我将使用函数防抖来控制触发频率!
    */

懒加载 + 函数防抖

1. 通过setTimeout控制scroll事件的触发频率
2. 设置一个延迟时间保证scroll时间不被完全锁死

window.onload = (() => {

  let number = 0  // 记录替换过图片的索引
  let imgList = Array.from(document.getElementsByTagName('img'))
  let imgListLength = Array.from(document.getElementsByTagName('img')).length
  let seeHeight = document.documentElement.clientHeight

  /**
   *
   * @param fn        需要防抖执行的函数
   * @param delay     保证scroll事件不被完全锁死
   * @param atleast   当超过atleast毫秒,则立即执行此函数,否则延迟delay毫秒执行该函数
   * @returns {Function}
   */
  function throttle (fn, delay, atleast) {
    let timeout = null
    let startTime = new Date()
    return function () {
      let curTime = new Date()
      clearTimeout(timeout) //保证在同一delay时间内只被触发一次
      if (curTime - startTime >= atleast) {
        fn()
        startTime = curTime
      } else {
        timeout = setTimeout(fn, delay)
      }
    }
  }

  const lazyLoad = function () {
    console.log('被调用了')
    for (let i = number; i < imgListLength; i++) {
      let singleImg = imgList[i]
      //当前图片的顶部到可视区域的值                            当前图片的底部不能超过可视区域
      if (singleImg.getBoundingClientRect().top < seeHeight && singleImg.getBoundingClientRect().bottom > 0) {
        console.log('bottom', singleImg.getBoundingClientRect().bottom)
        setTimeout(() => {
          singleImg.src = singleImg.getAttribute('temp-src')
          singleImg.style.border = '1px solid orangeRed'
        }, 1000)
        number = number + 1
      }
    }
  }

  function init () {
    setTimeout(() => {
      lazyLoad()
    }, 1000)
  }

  init()

  window.addEventListener('scroll', throttle(lazyLoad, 500, 900), false)

})

总结

1. 这里是具体的Demo
2. 这里是我对函数防抖和函数节流的总结
3. 这里是对Demo的优化,使用了js 瀑布流布局 + 懒加载 + 函数防抖